<template>
    <h3>~~~这是About页面组件~~~</h3>
    <p>______props属性使用____{{msg}}_________________</p>
    <button @click="gotoAbout2">点击跳转到那边去</button> |
    <button @click="store.inc()">点击增加: {{store.count}}</button> |
    <button @click="store.$reset()">store重置</button>
    <hr>
    <div>store里的数据是 {{store.count}} | 双倍数据是 {{store.double}}</div>
    <br>
    <div>
        配置ROV连接地址: <input type="text" v-model="rov_conn_addr" style="width: 22em;font-size: 1.1em;">
        &nbsp;&nbsp; <button @click="do_save()">保存(save)</button>
        <br>
        <span>{{tipstr}}</span><br>
        <hr>
    </div>
</template>

<script setup>
    import {ref, onMounted, reactive,inject } from "vue"
    import {useRouter} from "vue-router"        // step1    引入全局路由对象
    import {useCounterStore} from "../store/counter.js"

    const store = useCounterStore()
    const rov_conn_addr = inject('serve_addr')//ref('')
    const props = defineProps({
        msg:String
    })
    const tipstr = ref('')

    onMounted(()=>{
        console.log('Home page<About Page> is Mounted~!')
        //rov_conn_addr.value = window.localStorage.getItem('server_addr')
    })

    let router = useRouter()        //step2    获取全局路由对象

    function gotoAbout2(){
        router.push({                            // step3     路由跳转并传递参数
            path:'/about2/From-button-click_push',
            query:{
                aa:"hahaha",
                bb: 9987
            }
        })
    }

    function do_save(){
        localStorage.setItem('server_addr',rov_conn_addr.value)
        tipstr.value = '保存成功！'
        setTimeout(()=>{
            tipstr.value = ''
        },1100)
    }

</script>

<style>
</style>
